<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-24 09:56:34
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-26 15:28:05
 * @FilePath: \bulletin-board\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <div class="header">应用资源</div>

      <div class="header-content">
        <div class="header-content-left">
          <countContent style="margin-bottom: 18px" />
          <countContent bg-color="#A192FF" style="margin-bottom: 18px" />
          <countContent bg-color="#72BEFF" style="margin-bottom: 18px" />
          <countContent bg-color="#15C0E6" style="margin-bottom: 18px" />
        </div>
        <div class="header-content-center">
          <div class="header-wrapper">
            <div>
              <textAndCount
                :top-style="{
                  fontSize: '48.0px',
                  fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
                  fontWeight: 'bold',
                  color: '#ffffff;'
                }"
                bottom-text="全市应用"
                :bottom-style="objCss"
                top-text="66"
              />
            </div>
            <div class="header-content-center-bottom">
              <textAndCount
                :top-style="{
                  fontSize: '30.0px',
                  fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
                  fontWeight: 'bold',
                  color: '#ffffff;'
                }"
                :bottom-style="objCss"
                top-text="66"
                bottom-text="市级"
              />
              <textAndCount
                :top-style="{
                  fontSize: '30.0px',
                  fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
                  fontWeight: 'bold',
                  color: '#ffffff;'
                }"
                :bottom-style="objCss"
                top-text="66"
                bottom-text="区县"
              />
            </div>
          </div>
        </div>
        <div class="header-content-right">
          <leftRightEachart
            id="topEachar"
            each-color="#A192FF"
            :key="Math.random(100) * 100"
            height="246.0px"
            width="100%"
          />
        </div>
      </div>
    </div>
    <!-- <Dialog :visible.sync="show"></Dialog>
    <titleView text="ceshii"></titleView>
    <titleView
      :bgImage="require('../../assets/dialog/close.png')"
      text="ceshii"
    ></titleView>
    <countContent></countContent>
    <textAndCount></textAndCount> -->
    <div class="content-bottom">
      <!--云网资源-->
      <div class="content-bottom-wrapper content-bottom-wrapper-net">
        <titleView
          text="云网资源"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />

        <div class="net-count-wrapper">
          <textAndCount
            :top-style="yunTop"
            :bottom-style="yunCss"
            top-text="66"
            bottom-text="云实例数"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#3F8CFF',
              fontSize: '18.0px'
            }"
            bottom-unit="个"
          />
          <div
            style="
              width: 1px;
              height: 50px;
              background: rgba(63, 140, 255, 0.15);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
            "
          />
          <textAndCount
            :top-style="yunTop"
            :bottom-style="yunCss"
            top-text="66"
            bottom-text="政务外网覆盖量"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#3F8CFF',
              fontSize: '18.0px'
            }"
            bottom-unit="个"
          />
        </div>

        <div style="margin-top: 12px">
          <titleView text="云网资源" :font-size="20" />
        </div>

        <div stlye="margin-right:10.0px;">
          <sourceEachart
            id="contentee"
            each-color="#72BEFF"
            :key="Math.random(100) * 100"
            height="146.0px"
            width="100%"
            x-type="value"
            y-type="category"
          />
        </div>
        <div style="margin-top: 12px">
          <titleView text="政务外网覆盖量" :font-size="20" />
          <div class="net-source">
            <div class="net-source-content">
              <div class="net">
                <div>66</div>
                <div>市级</div>
              </div>
              <div class="net">
                <div>66</div>
                <div>区县</div>
              </div>
            </div>
            <div class="net-source-content">
              <div class="net">
                <div>66</div>
                <div>街镇</div>
              </div>
              <div class="net">
                <div>66</div>
                <div>国有企业、高校及科研机构</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--数据资源-->
      <div class="content-bottom-wrapper content-bottom-wrapper-source">
        <titleView
          text="数据资源"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />
        <div class="net-count-wrapper">
          <textAndCount
            :top-style="yunTop"
            :bottom-style="yunCss"
            top-text="66"
            bottom-text="公共数据目录"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#3F8CFF',
              fontSize: '18.0px'
            }"
            bottom-unit="类"
          />
          <div
            style="
              width: 1px;
              height: 50px;
              background: rgba(63, 140, 255, 0.15);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
            "
          />
          <textAndCount
            :top-style="yunTop"
            :bottom-style="yunCss"
            top-text="66"
            bottom-text="共享数据目录"
            :top-bottom-style="{
              color: '#3F8CFF',
              fontSize: '18.0px'
            }"
            bottom-unit="类"
          />
          <div
            style="
              width: 1px;
              height: 50px;
              background: rgba(63, 140, 255, 0.15);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
            "
          />
          <textAndCount
            :top-style="yunTop"
            :bottom-style="yunCss"
            top-text="66"
            bottom-text="开放数据目录"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#3F8CFF',
              fontSize: '18.0px'
            }"
            bottom-unit="类"
          />
        </div>
        <div style="margin-top: 16px">
          <titleView text="数据增长情况(类)" :font-size="20" />
        </div>
        <div class="eachar-content">
          <div class="eachar-content-title">
            <span>数据共享</span>
            <sourceEachart id="content" :key="Math.random(100) * 100" />
          </div>
          <div class="eachar-content-title">
            <span>数据开放</span>
            <sourceEachart
              id="contente"
              each-color="#A192FF"
              :key="Math.random(100) * 100"
            />
          </div>
        </div>
        <div style="margin-top: 16px">
          <titleView text="川渝数据共享" :font-size="20" />
        </div>
        <div style="margin-top: 12px">
          <tableComponent
            :is-index="false"
            :is-show="true"
            :header="['部门(个)', '数据资源(类)', '数据项(个)']"
            :list="[
              { name: '重庆', count: '666', count1: '666', count2: '666' },
              { name: '重庆', count: '666', count1: '666', count2: '666' }
            ]"
          />
        </div>
      </div>

      <div class="content-bottom-wrapper content-bottom-wrapper-source">
        <titleView
          text="感知资源"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />
        <div class="net-count-wrapper">
          <textAndCount
            :top-style="{
              fontSize: '30.0px',
              fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
              fontWeight: 'bold',
              color: '#2B4054'
            }"
            :bottom-style="yunCss"
            top-text="66"
            bottom-text="政府机关单位"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#2B4054',
              fontSize: '18.0px'
            }"
            bottom-unit="类"
          />
          <div
            style="
              width: 1px;
              height: 50px;
              background: rgba(63, 140, 255, 0.15);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
            "
          />
          <textAndCount
            :top-style="{
              fontSize: '30.0px',
              fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
              fontWeight: 'bold',
              color: '#2B4054'
            }"
            :bottom-style="yunCss"
            bottom-text="国有企业"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#2B4054',
              fontSize: '18.0px'
            }"
            bottom-unit="类"
          />
          <div
            style="
              width: 1px;
              height: 50px;
              background: rgba(63, 140, 255, 0.15);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
            "
          />
          <textAndCount
            :top-style="{
              fontSize: '30.0px',
              fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
              fontWeight: 'bold',
              color: '#2B4054'
            }"
            :bottom-style="yunCss"
            bottom-text="社会公共"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#2B4054',
              fontSize: '18.0px'
            }"
            bottom-unit="类"
          />
        </div>
        <div style="margin-top: 12px">
          <titleView text="感知类型" :font-size="20" />
        </div>
        <textAndBgCount style="margin-top: 12px" />
        <div style="margin-top: 12px">
          <titleView text="应用类型" :font-size="20" />
        </div>
        <textAndBgCount style="margin-top: 12px" />
      </div>

      <div class="content-bottom-wrapper content-bottom-wrapper-source">
        <titleView
          text="组件资源"
          :font-size="24"
          :bg-image="require('../../assets/image/yunziyuan.png')"
        />
        <div class="net-count-wrapper">
          <textAndCount
            :top-style="{
              fontSize: '30.0px',
              fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
              fontWeight: 'bold',
              color: '#3F8CFF'
            }"
            :bottom-style="yunCss"
            top-text="30"
            bottom-text="上架数量"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#3F8CFF',
              fontSize: '18.0px'
            }"
            bottom-unit="个"
          />
          <div
            style="
              width: 1px;
              height: 50px;
              background: rgba(63, 140, 255, 0.15);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
            "
          />
          <textAndCount
            :top-style="{
              fontSize: '30.0px',
              fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
              fontWeight: 'bold',
              color: '#3F8CFF'
            }"
            :bottom-style="yunCss"
            top-text="145"
            bottom-text="调用量"
            :top-bottom-font="true"
            :top-bottom-style="{
              color: '#3F8CFF',
              fontSize: '18.0px'
            }"
            bottom-unit="万次"
          />
          <div
            style="
              width: 1px;
              height: 50px;
              background: rgba(63, 140, 255, 0.15);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
            "
          />
          <textAndCount
            :top-style="{
              fontSize: '30.0px',
              fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
              fontWeight: 'bold',
              color: '#2B4054'
            }"
            top-text="99%"
            :bottom-style="yunCss"
            bottom-text="成功率"
            :top-bottom-font="false"
            :top-bottom-style="{
              color: '#2B4054',
              fontSize: '18.0px'
            }"
          />
        </div>
        <div style="margin-top: 16px">
          <titleView text="强制类组件" :font-size="20" />
        </div>
        <div style="margin-top: 12px">
          <tableComponent
            :header="['组件名称', '调用量']"
            :list="[
              { name: '个人单点', count: '666' },
              { name: '个人单点登录', count: '666' },
              { name: '个人单点登录(政府侧)', count: '666' },
              { name: '个人单点登录政', count: '666' },
              { name: '个人单点登录政府', count: '666' },
              { name: '个人单点', count: '666' },
              { name: '个人单点登', count: '666' },
              { name: '个人单点登录政府侧', count: '666' },
              { name: '个人单点登录政府侧', count: '666' },
              { name: '个人单点登录政府侧', count: '666' },
              { name: '个人单点登录政府侧', count: '666' },
              { name: '个人单点登录政府侧', count: '666' }
            ]"
            :body-style="{
              height: '280.0px',
              overflowY: 'auto'
            }"
            :is-width="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Dialog from '@/components/dialog'
import titleView from '@/components/title'
import countContent from '@/components/countContent'
import textAndCount from '@/components/textAndCount'
import textAndBgCount from '@/components/textBgAndCount'
import tableComponent from '@/components/tableComponent'
import sourceEachart from '@/components/sourceEachart'
import leftRightEachart from '@/components/leftRightEachart'

export default {
  name: 'Dashboard',
  components: {
    Dialog,
    titleView,
    countContent,
    textAndCount,
    textAndBgCount,
    tableComponent,
    sourceEachart,
    leftRightEachart
  },
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      show: false,
      objCss: {
        fontSize: '18.0px',
        fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
        fontWeight: '400',
        color: '#ffffff'
      },
      yunCss: {
        fontSize: '18.0px',
        fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
        fontWeight: '400',
        color: '#2B4054'
      },
      yunTop: {
        fontSize: '30.0px',
        fontFamily: 'Microsoft YaHei-Bold, Microsoft YaHei',
        fontWeight: 'bold',
        color: '#3F8CFF'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 1862px;
  margin: 30px auto;
  /**头部css */
  .dashboard-header {
    width: 100%;
    height: 360px;
    background: #ffffff;
    border-radius: 16px 16px 16px 16px;
    .header-content {
      display: flex;
      justify-content: space-around;
      padding: 0 26px 0 0px;
    }
    .header {
      font-size: 30px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #2b4054;
      text-align: center;
      padding: 22px 0;
    }

    .header-content-left {
      display: flex;
      width: 662px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
    }
    .header-content-center {
      width: 434px;
      height: 272px;
      background: url('../../assets/image/header-center.png');
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .header-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        height: 200px;
      }
      .header-content-center-bottom {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
    .header-content-right {
      width: 662px;
      height: 272px;
    }
  }

  /**底部css */
  .content-bottom {
    width: 100%;
    height: 550px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .content-bottom-wrapper {
      width: 443px;
      height: 550px;
      background: #ffffff;
      border-radius: 16px 16px 16px 16px;
      opacity: 1;
      padding: 22px 20px 10px 15px;
    }
    .content-bottom-wrapper-net {
      overflow: hidden;
      .net-count-wrapper {
        margin: 10px auto;
        width: 382px;
        height: 100px;
        background: rgba(229, 239, 255, 0.3);
        border-radius: 16px 16px 16px 16px;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
    .content-bottom-wrapper-source {
      overflow: hidden;
      .net-count-wrapper {
        margin: 10px auto;

        width: 382px;
        height: 100px;
        background: rgba(229, 239, 255, 0.3);
        border-radius: 16px 16px 16px 16px;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .eachar-content {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .eachar-content-title {
          display: flex;
          flex-direction: column;
          align-items: center;
          span {
            margin-top: 6px;
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #2b4054;
          }
        }
      }
    }
    .net-source {
      width: 380px;
      height: 139px;
      background: linear-gradient(
        180deg,
        rgba(222, 246, 251, 0.6) 0%,
        rgba(222, 246, 251, 0) 100%
      );
      border-radius: 16px 16px 16px 16px;
      opacity: 1;
      margin: 10px auto;

      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 10px;
      box-sizing: border-box;
      .net-source-content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        .net {
          div {
            font-size: 18px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            color: #2b4054;
            font-weight: 400;
            &:nth-child(1) {
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>
